<template>
	<view class="page">
		<CustomNav :isBack="true" color="#fff" :topBgColor="topBgColor" title="肃州种子"></CustomNav>
		<view :style="'margin-top:'+mt" class="content">
			<view class="info-block">
				<view class="name-info">
					<view class="name">{{info.jobTitle}}</view>
					<view class="fast-job" v-if="info.worry">急招</view>
				</view>
				<view class="info-list">
					<view class="info-item">
						<image src="@/static/images/position2.png" class="info-icon"></image>
						<view class="info">{{info.jobAddress}}</view>
					</view>
					<view class="info-item">
						<image src="@/static/images/experience.png" class="info-icon"></image>
						<view class="info">{{info.experience}}</view>
					</view>
					<view class="info-item">
						<image src="@/static/images/educational.png" class="info-icon"></image>
						<view class="info">{{info.education}}</view>
					</view>
				</view>
				<view class="wage">{{info.minSalary}}-{{info.maxSalary}}<text class="unit">元/月</text>
				</view>
				<view class="demand">岗位需求数：3人</view>
			</view>
			<view class="block">
				<view class="title">职位描述</view>
				<view class="describe">{{info.describe}}</view>
			</view>
			<view class="block">
				<view class="title">职位福利</view>
				<view class="label-block">
					<view class="label-item" v-for="(item,index) in info.welfareList" :key="item.id">{{item}}</view>
				</view>
			</view>
			<view class="block">
				<view class="title">职位地址</view>
				<view class="info-item">
					<image src="../../static/images/position2.png" style="width: 40rpx;height: 40rpx;"></image>
					<view class="info-value">{{info.address||'暂无位置'}}</view>
					<view v-if="info.address" @click="openMap(info.latitude,info.longitude,info.address)"
						class="operate-btn">
						<view class="iconfont iconfont-btn icon-daohang"></view>地图
					</view>
				</view>
			</view>
			<view class="block">
				<view class="title">联系方式</view>
				<view class="info-item">
					<image src="../../static/images/phone.png" style="width: 45rpx;height: 45rpx;"></image>
					<view class="info-value">{{info.phone||'暂无联系方式'}}</view>
					<view v-if="info.phone" @click="call('18209372023')" class="operate-btn">
						<view class="iconfont iconfont-btn icon-dianhua"></view>拨打
					</view>
				</view>
			</view>
			<view class="block">
				<view class="title">企业信息</view>
				<view class="company-block">
					<image :src="info.logoUrl" class="company-icon"></image>
					<view class="company-info">
						<view class="company-name">{{info.enterpriseName}}</view>
						<view class="type">种子·0-20人</view>
						<view class="company">
							<view class="company-item">
								<image src="@/static/images/renzheng.png" class="iconfont"></image>
								<view class="company-text">营业执照已认证</view>
							</view>
							<view class="company-item">
								<image src="@/static/images/renzheng.png" class="iconfont"></image>
								<view class="company-text">手机号已认证</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				info: {
					jobTitle: '农业技术员',
					minSalary: 3000,
					maxSalary: 6000,
					worry: 1,
					jobAddress: '果园镇',
					experience: '1-3年',
					education: '大专',
					distances: 3.6,
					logoUrl: '/static/images/company.png',
					enterpriseName: '酒泉某某某某种⼦有限公司',
					describe: '1.按照公司业务要求，配合市场为客户提供农化服务；2. 学习并引进先进农业生产技术， 合理安排基地育苗、 水肥、 植保等工作；3. 能够按照农作物提供播种、 施肥、 管理、 种植咨询服务， 为客户针对性提供农作物管理方案；4. 针对大客户基地的施肥方案做好技术指导， 以及后期的跟踪服务；5. 负责基地的园区规划， 以及对基地农作物（ 蔬菜、 瓜果） 进行育苗、 病虫防治等技术指导；6. 负责育苗， 扩繁， 栽培等作业流程， 熟悉果蔬种植和管护以及病虫害防治技术；7. 负责指导及管理基地工作人员进行果蔬种植， 对负责的种植种类的整个种植期进行记录并撰写总结报告；8. 负责基地果蔬新品种、 新技术的试验及推广工作， 特别是高品质、 高效益的种植及推广；9. 熟悉土壤分析， 提供配方施肥措施， 搞好试验、 示范、 撰写总结和调查报告， 提出施肥意见， 指导如何施肥；10. 在技术层面提出相关总结意见建议；11. 完成上级安排的其他工作任务。 ',
					welfareList: ['五险一金', '周末双休', '交通补贴'],
					phone: '182****2023',
					address: '酒泉市肃州区果园镇政府街12号',
					longitude: 98.531844,
					longitude: 39.782694,
				}
			}
		},
		watch: {

		},
		methods: {

		},
		onLoad() {

		}
	}
</script>

<style lang="scss">
	.page {
		overflow: hidden;
		height: 100%;
		background-image: linear-gradient(to bottom, #68C759, #F8F8F8 400px, #F8F8F8 400px, #F8F8F8);
		background-repeat: no-repeat;

		.content {
			width: $content-width;
			margin: 0 auto;

			.info-block {
				background-color: #fff;
				margin-bottom: 30rpx;
				padding: 30rpx;
				border-radius: 30rpx;

				.name-info {
					display: flex;
					flex-direction: row;
					align-items: center;

					.name {
						color: #000;
						font-size: 36rpx;
						font-weight: bold;
					}

					.fast-job {
						width: 60rpx;
						height: 38rpx;
						background: #B2DEAC;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						margin-left: 20rpx;
						border-radius: 6rpx;
					}
				}

				.info-list {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					.info-item {
						display: flex;
						align-items: center;
						margin-right: 30rpx;

						.info-icon {
							width: 35rpx;
							height: 35rpx;
							margin-right: 10rpx;
						}

						.info {
							color: #767676;
							font-size: 30rpx;
						}
					}
				}

				.wage {
					color: $theme-color;
					font-size: 34rpx;
					margin-top: 30rpx;
					margin-bottom: 30rpx;

					.unit {
						font-size: 28rpx;
						font-weight: normal;
						margin-left: 6rpx;
					}
				}

				.demand {
					color: #767676;
					font-size: 30rpx;
					border-top: 1px solid #EEEEEE;
					padding-top: 30rpx;
				}
			}

			.block {
				background-color: #fff;
				margin-bottom: 30rpx;
				padding: 30rpx;
				border-radius: 30rpx;

				.title {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.describe {
					line-height: 55rpx;
					font-size: 30rpx;
				}

				.label-block {
					width: 100%;
					font-size: 24rpx;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: left;
					margin-top: 20rpx;

					.label-item {
						padding: 10rpx 16rpx;
						background: #66BD59;
						border-radius: 4rpx;
						color: #fff;
						margin-right: 30rpx;
						border-radius: 10rpx;
					}
				}

				.info-item {
					height: 100rpx;
					display: flex;
					align-items: center;

					.info-value {
						width: calc(100% - 240rpx);
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.iconfont {
						font-weight: bold;
						color: #000;
						width: 50rpx;
						font-size: 38rpx;
						margin-right: 20rpx;
					}

					.operate-btn {
						width: 160rpx;
						border-radius: 20px;
						border: 1px solid $theme-color;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: $theme-color;

						.iconfont-btn {
							font-size: 34rpx;
							margin-right: 10rpx;
							width: auto;
							color: $theme-color;
						}
					}
				}

				.company-block {
					display: flex;
					align-items: center;

					.company-icon {
						width: 160rpx;
						height: 160rpx;
						margin-right: 10rpx;
					}

					.company-info {
						width: calc(100% - 170rpx);

						.company-name {
							font-size: 32rpx;
						}

						.type {
							font-size: 28rpx;
							margin-top: 30rpx;
							color: #767676;
						}

						.company {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 30rpx;

							.company-item {
								display: flex;
								align-items: center;

								.iconfont {
									width: 35rpx;
									height: 35rpx;
								}

								.company-text {
									font-size: 28rpx;
									color: #767676;
								}
							}
						}
					}
				}
			}
		}
	}
</style>